<template>
	<div class="common _product">
		<div class="common-top clearfix">
			<div class="left flex flex-align-center" style="height:100%;">
				<!-- <span style="margin-left:20px;font-size:18px;cursor:pointer;">上下架记录(商品)-</span> -->
				<span style="margin-left:20px;font-size:18px;cursor:pointer;"></span>
				<!-- <span @click="type$ement" style="font-size:14px;cursor:pointer;color: #618bfb;">点击按订单查询<i style="font-size:14px;font-weight:600;margin-left:2px;" class="iconfont icon-exchange2jiaohuan"></i></span> -->
			</div>
			<div class="change-stock-btn2 mode">
				<span>商品</span>
				<span :class="modeType=='PRODUCT'?'change-btn':'change-btn right-btn'" @click.stop="changeModeType">
					<i @click.stop=""></i>
				</span>
				<span>原料</span>
			</div>
			<div style="z-index:999" class="search-box left flex flex-align-center _product-top-item-smile">
				<el-input
				 	class="input-box"
				    placeholder="输入名称..."
				    @blur="blurSearch"
				    prefix-icon="el-icon-search"
				    v-model="productNames"
				    clearable>
				</el-input>
				<ul class="ul-box" v-if="searchArr.length">
					<li v-for="item in searchArr" v-text="item.name" @click="getSearchItem(item)"></li>
				</ul>
			</div>
			<!-- <div class="left flex flex-align-center _product-top-item">
				<el-date-picker
			      v-model="searchData.timeFrom"
			      :picker-options="pickerOptions0"
			      type="datetime"
			      placeholder="选择开始时间">
			    </el-date-picker>
			</div>
			<div class="left flex flex-align-center _product-top-item">
				<el-date-picker
			      v-model="searchData.timeTo"
			      :picker-options="pickerOptions0"
			      type="datetime"
			      placeholder="选择结束时间">
			    </el-date-picker>
			</div> -->
			<!-- <div class="left flex flex-align-center" style="height:100%;">
				<span>类型：</span>
			</div>
			<div class="left flex flex-align-center _product-top-item-smile" style="width:100px;">
				<el-select v-model="searchData.stockType" class="select">
				    <el-option
				      v-for="item in [{value: 'ALL',label: '全部'},{value: 'STOCK_IN',label: '吧台入库'},{value: 'STOCK_OUT',label: '吧台出库'}]"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
				 </el-select>
			</div>
			<div class="left flex flex-align-center" style="height:100%;" >
				<span>原因：</span>
			</div>
			<div class="left flex flex-align-center _product-top-item-smile" style="width:120px;">
				<el-select v-model="searchData.stockSource" clearable placeholder="请选择出入库原因" class="select">
				    <el-option
				      v-for="item in typeOptions"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
				 </el-select>
			</div> -->
			<div class="left flex flex-align-center phone-filter" style="height:100%;">
				<input type="text" placeholder="手机号，可选填。" v-model="phoneNum" />
			</div>
			<el-date-picker
			v-model="startTime"
			type="datetime"
			class="dateTime"
			default-time="00:00:00"
			style="margin-left:10px;width:9%;margin-right:10px"
			:picker-options="pickerOptionsForTimeRange"
			placeholder="开始时间">
			</el-date-picker>
			<el-date-picker
			v-model="endTime"
			type="datetime"
			class="dateTime"
			default-time="23:59:59"
			style="margin-left:10px;width:9%;margin-right:10px"
			:picker-options="pickerOptionsForTimeRange"
			placeholder="结束时间">
			</el-date-picker>
			<div class="search-btn" style="margin-left:10px;margin-right:10px" @click="search">
				<span>查询</span>
			</div>
			<div class="left flex flex-align-center" style="height:100%;">
				<div class="quick-filter">
					<span :class="nowSelFilter=='today'?'active':''" 
					@click.stop="filter('today')">今日</span>
					<span :class="nowSelFilter=='lastDay'?'active':''" 

					@click.stop="filter('lastDay')">昨日</span>
					<span :class="nowSelFilter=='week'?'active':''" 

					@click.stop="filter('week')">本周</span>
					<span :class="nowSelFilter=='lastWeek'?'active':''" 

					@click.stop="filter('lastWeek')">上周</span>
					<span :class="nowSelFilter=='month'?'active':''" 

					@click.stop="filter('month')">本月</span>
					<span :class="nowSelFilter=='lastMonth'?'active':''" 
					@click.stop="filter('lastMonth')">上月</span>
				</div>
				
			</div>
		</div>
		<div class="search-cont">
			<div class="left flex flex-align-center type">
				<span>类型：</span>
			</div>
			<el-radio-group v-model="searchData.stockType">
				<el-radio :label="item.value" v-for="(item,index) in [{value: 'ALL',label: '全部'},{value: 'STOCK_IN',label: '吧台入库'},{value: 'STOCK_OUT',label: '吧台出库'}]" :key="index">{{item.label}}</el-radio>
			</el-radio-group>
			<div class="line"></div>
			<div class="left reason flex flex-align-center">
				<span>原因：</span>
			</div>
			<el-radio-group v-model="searchData.stockSource">
				<el-radio :label="item.value" v-for="(item,index) in typeOptions" :key="index">{{item.label}}</el-radio>
			</el-radio-group>
		</div>
		<div class="content-box">
			<div class="content">
				<div class="titleTable">
					<table>
	                    <tr>
	                        <th style="width:6%">序号</th>
	                        <th style="width:9.4%">名字</th>
	                        <!-- <th style="width:9.4%">件数(件)</th> -->
	                        <th style="width:9.4%">原有数量</th>
	                        <th style="width:9.4%">数量</th>
	                        <th style="width:9.4%">剩余数量</th>
	                        <!-- <th style="width:9.4%">规格(个/件)</th> -->
	                        <th style="width:9.4%">类型</th>
	                        <th style="width:9.4%">原因</th>
	                        <th style="width:9.4%">备注</th>
	                        <th style="width:9.4%">时间</th>
	                        <!-- <th style="width:9.4%">每件进价(元/件)</th> -->
	                        <th style="width:9.4%">操作人员</th>
	                    </tr>
	                </table>
				</div>
                <div class="scrollBox">
                    <div class="scroll" :style="{'height':homeArr.length*10+'%'}">
                        <table class="conTable">
                            <tr v-for="(item,ind) in homeArr">
                                <td style="width:6%" v-text="ind+1+(currentPage-1)*pageSize"></td>
                                <td style="width:9.4%" v-text="item.skuName" :title="item.skuName"></td>
                                <!-- <td style="width:9.4%" v-text="item.whole"></td> -->
                                <td style="width:9.4%" v-text="item.orgQty"></td>
                                <td style="width:9.4%" v-text="item.quantity"></td>
                                <td style="width:9.4%" v-text="item.allowance"></td>
                                <!-- <td style="width:9.4%" v-text="item.stockQuantityRatio"></td> -->
                                <td style="width:9.4%" v-text="stockType[item.type]"></td>
                                <td style="width:9.4%" v-text="sourceType[item.source]"></td>
                                <td style="width:9.4%" v-text="item.notes?item.notes:'-'" :title="item.notes"></td>
                                <td style="width:9.4%">{{item.addTime | numberToAllDate('')}}</td>
                                <!-- <td style="width:9.4%" v-text="item.stockPrice/100"></td> -->
                                <td style="width:9.4%" v-text="item.operatorName"></td>
                            </tr>
                        </table>
                    </div>
                </div>
                 <div class="pagers">
					<el-button type="primary" @click="excel">导出Excel</el-button>
				    <el-pagination
				      	@current-change="handleCurrentChange"
				      	:current-page.sync="currentPage"
				      	:page-size="pageSize"
				      	layout="total, prev, pager, next,jumper"
				      	:total="total">
				    </el-pagination>
                </div>
			</div>
		</div>

	</div>
</template>

<script>
export default {
  	props:['storeId','config'],
  	data(){
		return {
			modeType:"PRODUCT",
			startTime:"",
			endTime:"",
			canClick:true,
			phoneNum:"",
			pickerOptions0: {
			    disabledDate(time) {
			        return time.getTime() > Date.now();
			    }
			},
			pickerOptionsForTimeRange:{
                   disabledDate(time) {
				   let date = (new Date(time));
				//    let dateStr = date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate();
				//    let newDate = new Date(dateStr).getTime();
				//    let newDateForNextMonth = new Date(date.getFullYear(),(date.getMonth()+1),0).getTime();
				//    return time.getTime() < newDate || time.getTime() > newDateForNextMonth;
				    let curDate = (new Date()).getTime();
				    let three = 90 * 24 * 3600 * 1000;
				    let threeDays = curDate - three;
				    return time.getTime() > Date.now() || time.getTime() < threeDays;
				} 
			},
			typeOptions: [
					{value: '',label: '全部'},
	   				{value: 'PURCHASE_IN',label: '采购'},
					{value: 'ALLOCATION_IN',label: '店铺调拨'},
					{value: 'ALLOCATION_OUT',label: '调拨出库'},
					{value: 'CHECK_IN',label: '盘点入库'},
					{value: 'SALES_OUT',label: '销售出库'},
					{value: 'INNER_OUT',label: '仓储（仓库至吧台(针对仓库)）'},
					{value: 'REFUND_OUT',label: '退货出库'},
					{value: 'CHECK_OUT',label: '盘点出库'},
					{value: 'BAR_OUT',label: '吧台退回'},
		    ],
		    stockType:{
				STOCK_IN: "吧台入库",
				STOCK_OUT: "吧台出库"
				// SALES_OUT: "销售出库"
			},
			sourceType:{
				INNER_IN: "吧台上架",
				INNER_OUT: "吧台下架",
				REFUND_IN: "退单入库",
				// PURCHASE_IN:'采购',
				
				// ALLOCATION_IN:'店铺调拨',
				CHECK_IN:'盘点入库',
				// STOCK_OUT_ONE:'吧台到仓库',
				CHECK_OUT:'盘点出库',
				STOCK_INNER_IN:'仓库至吧台',
				// INNER_OUT:'仓储（仓库至吧台）',
				// REFUND:'退单入库',
				SALES_OUT:'销售出库',
				BAR_OUT:'吧台退回',
				// DECLINE:'吧台下架',
				// REFUND_OUT:'退货出库'
			},
			currentPage: 1,
	        pageSize:10,
	        total:0,

	        searchArr:[],//搜索的商品列表
	        productNames:'',//将要检索的商品
	        isBroductNamesBtn:true,//控制商品input
	        searchData:{
	        	timeFrom:'',
	        	timeTo: '',
	        	productId:'',
	        	stockType:"",
	        	stockSource:""
	        },
	        sendSearchData:{
	        	timeFrom:'',
	        	timeTo: '',
	        	productId:'',
	        	stockType:"ALL",
	        	stockSource:"ALL"
	        },
	        homeArr:[],//盘点列表
	        checkDetailArr:[],//盘点详情列表
	        willCheckBody:{}//将要判断的  body
		}
	},
	watch:{
		productNames(val) {
		   	this.searchArr = [];
		   	if(!this.isBroductNamesBtn){
		   		this.isBroductNamesBtn = true;
		   		return;
		   	}
		   	if(!val){
		   		this.searchData.productId = '';
		   		return;
		   	}
		   	this.$http.get('search?storeId='+this.storeId+'&q='+val+"&mold="+this.modeType).then((res)=>{
		   		this.searchArr = res.data;
		   	})
	   	},
	   	'searchData.stockType':function (val) {
	   		this.searchData.stockSource = 'ALL';
	   		if(val=='STOCK_IN'){
	   			this.typeOptions = [
	   				{value: 'ALL',label: '全部'},
	   				{value: 'INNER_IN',label: '吧台上架'},
	   				{value: 'REFUND_IN',label: '退单入库'},
	   				{value: 'CHECK_IN',label: '盘点入库'},
	   			]
	   		}else if(val=='STOCK_OUT'){
	   			this.typeOptions = [
					{value: 'ALL',label: '全部'},
					{value: 'INNER_OUT',label: '吧台下架'},
					{value: 'CHECK_OUT',label: '盘点出库'},
					{value: 'SALES_OUT',label: '销售出库'},
					{value: 'BAR_OUT',label: '吧台退回'},
	   			]
	   		}else{
	   			this.typeOptions = [
	   				{value: 'ALL',label: '全部'},
	   				{value: 'INNER_IN',label: '吧台上架'},
	   				{value: 'REFUND_IN',label: '退单入库'},
					{value: 'CHECK_IN',label: '盘点入库'},
					{value: 'INNER_OUT',label: '吧台下架'},
					{value: 'CHECK_OUT',label: '盘点出库'},
					{value: 'SALES_OUT',label: '销售出库'},
					{value: 'STOCK_INNER_IN',label: '仓库至吧台'},
					{value: 'BAR_OUT',label: '吧台退回'},
	   			]
	   		}
	   	}
	},
	methods:{
		excel() {
			if(!this.homeArr.length){
				return;
			}
			if(this.canClick){
				this.canClick = false;
				let body;
				if(this.phoneNum){
					if(!/^1[3|4|5|6|7|8|9][0-9]{9}$/.test(this.phoneNum)){
						this.$message({
							showClose: true,
							message: '手机号格式错误',
							type: 'error'
						})
						return;
					}
					if(this.sendSearchData.productId){
						body = {
							storeId:this.storeId,
							page:0,
							size:10000,
							productId:this.sendSearchData.productId,
							type:this.sendSearchData.stockType,
							reason:this.sendSearchData.stockSource,
							phone:this.phoneNum,
							begin:new Date(this.startTime).Format("yyyy-MM-dd")+" 00:00:00",
							end:new Date(this.endTime).Format("yyyy-MM-dd")+" 23:59:59",
							mold:this.modeType
						}
					}else{
						body = {
							storeId:this.storeId,
							page:0,
							size:10000,
							// productId:this.sendSearchData.productId,
							type:this.sendSearchData.stockType,
							reason:this.sendSearchData.stockSource,
							phone:this.phoneNum,
							begin:new Date(this.startTime).Format("yyyy-MM-dd")+" 00:00:00",
							end:new Date(this.endTime).Format("yyyy-MM-dd")+" 23:59:59",
							mold:this.modeType
						}
					}
				}else{
					if(this.sendSearchData.productId){
						body = {
							storeId:this.storeId,
							page:0,
							size:10000,
							productId:this.sendSearchData.productId,
							reason:this.sendSearchData.stockSource,
							type:this.sendSearchData.stockType,
							begin:new Date(this.startTime).Format("yyyy-MM-dd")+" 00:00:00",
							end:new Date(this.endTime).Format("yyyy-MM-dd")+" 23:59:59",
							mold:this.modeType
						}
					}else{
						body = {
							storeId:this.storeId,
							page:0,
							size:10000,
							// productId:this.sendSearchData.productId,
							reason:this.sendSearchData.stockSource,
							type:this.sendSearchData.stockType,
							begin:new Date(this.startTime).Format("yyyy-MM-dd")+" 00:00:00",
							end:new Date(this.endTime).Format("yyyy-MM-dd")+" 23:59:59",
							mold:this.modeType
						}
					}
				}
				
				this.$http({
					url:"getBar-transaction",
					method:"GET",
					params:body
				}).then(res=>{
					console.log(res);
					setTimeout(()=>{
						this.canClick = true;
					},500);
					
					let data = res.data.content;
					let html =
						'<tr  style="font-size:18px;font-weight:900;text-align:center">' +
						"<td>名字</td>" +
						"<td>原有数量</td>" +
						"<td>数量</td>" +
						"<td>剩余数量</td>" +
						"<td>类型</td>" +
						"<td>原因</td>" +
						"<td>备注</td>" +
						"<td>时间</td>" +
						"<td>操作人员</td>" +
						"</tr>";
						for (var i = 0; i < data.length; i++) {
						html +=
							'<tr  style="font-size:14px;text-align:center">' +
							"<td>" +
							data[i].skuName +
							"</td>" +
							// 
							"<td>" +
							data[i].orgQty +
							"</td>" +
							// 
							// 
							"<td>" +
							data[i].quantity +
							"</td>" +
							// 
							// 
							"<td>" +
							Number(data[i].allowance) +
							"</td>" +
							// 
							// 
							"<td>" +
							this.stockType[data[i].type] +
							"</td>" +
							// 
							// 
							"<td>" +
							this.sourceType[data[i].source] +
							"</td>" +
							// 
							// 
							"<td>" +
							data[i].notes +
							"</td>" +
							//
							"<td>" +
							new Date(data[i].addTime).Format("yyyy/MM/dd hh:mm:ss") +
							"</td>" +
							//
							"<td>" +
							data[i].operatorName +
							"</td>" +
							"</tr>";
						}
						let table = document.createElement("table");
						document.body.appendChild(table);
						table.style.display = "none";
						// table.style.borderCollapse='collapse';
						table.innerHTML = html;
						window.method5(table);
				}).catch(err=>{
					this.canClick = true;
				});
			}
		},
		// 
		changeModeType(){
			this.modeType == "PRODUCT"?this.modeType="MATERIAL":this.modeType="PRODUCT";
		},
		filter(type){
			let timeRangeArr = [];
			this.nowSelFilter = type;
			switch (type) {
				case "today":
					// this.yearMonth = new Date().Format("yyyy-MM");
					this.startTime = `${new Date().Format("yyyy/MM/dd")} 00:00:00`;
					// let year = new Date().Format("yyyy");
					// let month = new Date().Format("MM");
					this.endTime =  `${new Date().Format("yyyy/MM/dd")} 23:59:59`;
					this.search();
					break;
				case "lastDay":
					this.startTime = `${new Date().Format("yyyy/MM/dd")} 00:00:00`;
					this.startTime = `${new Date(new Date(this.startTime).getTime() - 1000*60*60*24).Format("yyyy/MM/dd")} 00:00:00`;
					this.endTime =  `${new Date().Format("yyyy/MM/dd")} 23:59:59`;
					this.endTime = `${new Date(new Date(this.endTime).getTime() - 1000*60*60*24).Format("yyyy/MM/dd")} 23:59:59`;
					this.search();
					break;
				case "week":
					timeRangeArr = this.$dateRange.getThisWeek();
					this.startTime = `${timeRangeArr[0]} 00:00:00`;
					this.endTime = `${timeRangeArr[1]} 23:59:59`;
					this.search();
					break;
				case "lastWeek":
					timeRangeArr = this.$dateRange.getLastWeek();
					this.startTime = `${timeRangeArr[0]} 00:00:00`;
					this.endTime = `${timeRangeArr[1]} 23:59:59`;
					this.search();
					break;
				case "month":
					timeRangeArr = this.$dateRange.getThisMonth();
					console.log(timeRangeArr)
					this.startTime = `${timeRangeArr[0]} 00:00:00`;
					this.endTime = `${timeRangeArr[1]} 23:59:59`;
					this.search();
					break;
				case "lastMonth":
					timeRangeArr = this.$dateRange.getLastMonth();
					console.log(timeRangeArr)
					this.startTime = `${timeRangeArr[0]} 00:00:00`;
					this.endTime = `${timeRangeArr[1]} 23:59:59`;
					this.search();
					break;
				default:
					break;
			}
		},
		search(){
			if(this.startTime && this.endTime && (this.startTime!="NaN-aN-aN" && this.endTime!="NaN-aN-aN")){
				if(new Date(this.startTime)>new Date(this.endTime)){
					this.$message({
						message: '结束时间不能比开始时间小',
						type: 'error'
					})
					return;
				}
				let days = 1000*60*60*24*35;
				if(new Date(this.endTime) - new Date(this.startTime) > days){
					this.$message({
						message: '查询时间段最多35天',
						type: 'error'
					});
					return;
				}
			}else{
				this.$message({
					message: '请选择查询时间段',
					type: 'error'
				})
				return;
			}
			this.sendSearchData = {
	        	timeFrom:this.searchData.timeFrom,
	        	timeTo: this.searchData.timeTo,
	        	productId:this.searchData.productId,
	        	stockType:this.searchData.stockType,
	        	stockSource:this.searchData.stockSource
			};
			
			if(this.currentPage==1){
				this.getHomeData(null);
			}else{
				this.currentPage=1;
				this.getHomeData(this.currentPage);
			};
		
		},
		//切换 商品<==>订单  查询
		type$ement(){
			this.$emit('ement','_order');
		},
		//翻页
	    handleCurrentChange(val) {
	        console.log(`当前页: ${val}`);
	        this.getHomeData(val);
	    },
	    //选择商品
	    getSearchItem(item){
	    	this.productNames = item.name;
	    	this.isBroductNamesBtn = false;
	    	this.searchData.productId = item.id;
	    },
	    blurSearch(){
	    	setTimeout(()=>{
	    		this.searchArr = [];
	    	},800)
	    },
	    //获取首页数据
	    getHomeData(currentPage){
			if(this.canClick){
				this.canClick = false;
				this.homeArr = [];
				let body;
				if(this.phoneNum){
					if(!/^1[3|4|5|6|7|8|9][0-9]{9}$/.test(this.phoneNum)){
						this.$message({
							showClose: true,
							message: '手机号格式错误',
							type: 'error'
						})
						return;
					}
					if(this.sendSearchData.productId){
						body = {
							storeId:this.storeId,
							page:(currentPage?currentPage-1:0),
							productId:this.sendSearchData.productId,
							type:this.sendSearchData.stockType,
							reason:this.sendSearchData.stockSource,
							phone:this.phoneNum,
							begin:new Date(this.startTime).Format("yyyy-MM-dd")+" 00:00:00",
							end:new Date(this.endTime).Format("yyyy-MM-dd")+" 23:59:59",
							mold:this.modeType
						}
					}else{
						body = {
							storeId:this.storeId,
							page:(currentPage?currentPage-1:0),
							// productId:this.sendSearchData.productId,
							type:this.sendSearchData.stockType,
							reason:this.sendSearchData.stockSource,
							phone:this.phoneNum,
							begin:new Date(this.startTime).Format("yyyy-MM-dd")+" 00:00:00",
							end:new Date(this.endTime).Format("yyyy-MM-dd")+" 23:59:59",
							mold:this.modeType
						}
					}
				}else{
					if(this.sendSearchData.productId){
						body = {
							storeId:this.storeId,
							page:(currentPage?currentPage-1:0),
							productId:this.sendSearchData.productId,
							reason:this.sendSearchData.stockSource,
							type:this.sendSearchData.stockType,
							begin:new Date(this.startTime).Format("yyyy-MM-dd")+" 00:00:00",
							end:new Date(this.endTime).Format("yyyy-MM-dd")+" 23:59:59",
							mold:this.modeType
						}
					}else{
						body = {
							storeId:this.storeId,
							page:(currentPage?currentPage-1:0),
							// productId:this.sendSearchData.productId,
							reason:this.sendSearchData.stockSource,
							type:this.sendSearchData.stockType,
							begin:new Date(this.startTime).Format("yyyy-MM-dd")+" 00:00:00",
							end:new Date(this.endTime).Format("yyyy-MM-dd")+" 23:59:59",
							mold:this.modeType
						}
					}
				}
				
				this.$http({
					url:"getBar-transaction",
					method:"GET",
					params:body
				}).then(res=>{
					console.log(res);
					setTimeout(()=>{
						this.canClick = true;
					},500);
					this.homeArr = res.data.content;
					this.total = res.data.totalElements;
					if(res.data.totalElements==0){
						this.$message({
							showClose: true,
							message: '无相关数据',
							type: 'success'
						})
					}
				}).catch(err=>{
					this.canClick = true;
				});;
			}
			
		}
	},
	
	created () {
		this.searchData.stockType = 'ALL';
	},
	mounted() {
		// 获取初始数据
		// this.getHomeData();
	},
	beforeDestroy() {
	}
}
</script>
<style lang="scss" scoped>
	@import '../../../../static/css/common.scss';
	@import "_product";
</style>